<!-- Copyright 2016 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/html/action_link.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<link rel="import" href="../../cr_ui.html">
<link rel="import" href="../../components/oobe_icons.html">
<link rel="import" href="../../components/web_view_helper.html">
<link rel="import" href="../../components/behaviors/login_screen_behavior.html">
<link rel="import" href="../../components/behaviors/multi_step_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_i18n_behavior.html">
<link rel="import" href="../../components/buttons/oobe_back_button.html">
<link rel="import" href="../../components/buttons/oobe_text_button.html">
<link rel="import" href="../../components/common_styles/common_styles.html">
<link rel="import" href="../../components/common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="../../components/dialogs/oobe_adaptive_dialog.html">
<link rel="import" href="../../components/dialogs/oobe_modal_dialog.html">

<dom-module id="oobe-eula-element">
  <template>
    <style include="oobe-dialog-host-styles">
      a {
        color: var(--google-blue-500);
        text-decoration: none;
        width: fit-content;
      }

      oobe-modal-dialog {
        --oobe-modal-dialog-content-height: 360px;
      }

      #crosEulaFrame {
        /* minimal height which allows popup dialogs looks fine. */
        min-height: 200px;
      }

      #additionalToS {
        --oobe-modal-dialog-content-slot-padding-bottom: 0;
        --oobe-modal-dialog-content-slot-padding-end: 0;
        --oobe-modal-dialog-content-slot-padding-start: 0;
        --oobe-modal-dialog-title-slot-padding-bottom: 16px;
        --oobe-modal-dialog-width: 512px;
      }

      #additionalChromeToSFrame {
        padding-inline-end: 20px;
        padding-inline-start: 20px;
      }

      #logging {
        min-height: unset;
      }

      #footer-more {
        font-size: 13px;
        padding-inline-start: 16px;
      }

      #additionalTerms,
      #securitySettings,
      #logging {
        margin-top: 16px;
      }

      #logging {
        color: rgba(0, 0, 0, 0.54);
      }

      cr-checkbox {
        --cr-checkbox-label-padding-start: 16px;
      }

      #usageStatsLabelContainer {
        color: var(--google-grey-700); /* #5F6368 */
        line-height: 18px;
      }

      #usageStatsLabel {
        cursor: pointer;
      }

      #settings-close-button {
        padding-inline-end: 18px;
      }
    </style>
    <link rel="stylesheet" href="chrome://resources/css/throbber.css">
    <oobe-adaptive-dialog id="eulaLoadingDialog" for-step="loading"
        role="dialog"
        aria-label$="[[i18nDynamic(locale, 'termsOfServiceLoading')]]">
      <iron-icon slot="icon" icon="oobe-32:googleg"></iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'termsOfServiceLoading')]]
      </h1>
    </oobe-adaptive-dialog>
    <!-- As this dialog have pre-loading logic that require access to elements,
         dialog is marked as no-lazy. -->
    <oobe-adaptive-dialog id="eulaDialog" for-step="eula" role="dialog"
        aria-label$="[[i18nDynamic(locale, 'oobeEulaSectionTitle')]]"
        aria-describedby="crosEulaFrame" no-lazy>
      <iron-icon slot="icon" icon="oobe-32:googleg"></iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'oobeEulaSectionTitle')]]
      </h1>
      <div slot="content" class="flex layout vertical">
        <webview id="crosEulaFrame" allowTransparency
            role="document" class="flex oobe-tos-webview focus-on-show"
            aria-label$="[[i18nDynamic(locale, 'oobeEulaIframeLabel')]]"
            on-contentload="onFrameLoad_">
        </webview>
        <div id="footer-more" class="layout vertical">
          <a id="additionalTerms" on-click="onAdditionalTermsClicked_"
              class="oobe-local-link" is="action-link">
            [[i18nDynamic(locale, 'oobeEulaAditionalTerms')]]
          </a>
          <a id="securitySettings" class="oobe-local-link" is="action-link"
              on-click="onSecuritySettingsClicked_">
            [[i18nDynamic(locale, 'eulaSystemSecuritySettings')]]
          </a>
          <div id="logging" class="layout horizontal">
            <cr-checkbox id="usageStats" class="layout start self-center"
                checked="{{usageStatsChecked}}" on-change="onUsageChanged_"
                aria-labelledby="usageStatsLabel">
              <div id="usageStatsLabelContainer">
                <span id="usageStatsLabel">
                  [[i18nDynamic(locale, 'checkboxLogging')]]
                </span>
                <a id="learnMore" class="oobe-local-link" is="action-link"
                    on-click="onUsageStatsHelpLinkClicked_">
                  [[i18nDynamic(locale, 'learnMore')]]
                </a>
              </div>
            </cr-checkbox>
          </div>
        </div>
      </div>
      <div slot="back-navigation">
        <oobe-back-button
            on-click="onEulaBackButtonPressed_"></oobe-back-button>
      </div>
      <div slot="bottom-buttons">
        <oobe-text-button id="acceptButton" inverse on-click="eulaAccepted_"
            disabled="[[acceptButtonDisabled]]"
            text-key="oobeEulaAcceptAndContinueButtonText">
        </oobe-text-button>
      </div>
    </oobe-adaptive-dialog>
    <oobe-adaptive-dialog id="securitySettingsDialog" role="dialog"
      for-step="security"
      aria-label$="[[i18nDynamic(locale, 'eulaSystemSecuritySettings')]]">
      <iron-icon slot="icon" icon="oobe-32:googleg"></iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'eulaSystemSecuritySettings')]]
      </h1>
      <p slot="subtitle">
        [[tpmDescription_]]
      </p>
      <div slot="bottom-buttons" class="flex layout horizontal">
        <div class="flex"></div>
        <oobe-text-button id="settings-close-button" inverse
            class="focus-on-show"
            text-key="eulaSystemSecuritySettingsOkButton"
            on-click="onSecuritySettingsCloseClicked_"></oobe-text-button>
      </div>
    </oobe-adaptive-dialog>
    <oobe-modal-dialog id="additionalToS" ignore-popstate
        on-close="focusAdditionalTermsLink_"
        on-cancel="focusAdditionalTermsLink_">
      <div slot="title">
        [[i18nDynamic(locale, 'oobeEulaAditionalTerms')]]
      </div>
      <webview slot="content" role="document" class="flex oobe-tos-webview"
          id="additionalChromeToSFrame">
      </webview>
      <oobe-text-button id="closeAdditionalTos" slot="buttons"
          on-click="hideToSDialog_" text-key="oobeModalDialogClose" inverse>
      </oobe-text-button>
    </oobe-modal-dialog>
  </template>
  <script src="oobe_eula.js"></script>
</dom-module>
